<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="keywords" content="好友页面,18001010321,王梓豪">
    <title>好友18001010321</title>
    <script src="../iconfont/font_2232293_glnw4va62bs/iconfont.js"></script>
    <!-- <script src="../iconfont/bottom_navi/iconfont.js"></script> -->
    <link rel="stylesheet" href="../iconfont/friends/iconfont.css">
    <link rel="stylesheet" href="../iconfont/bottom_navi/iconfont.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            min-width: 320px;
        }

        img {
            border: none;
            display: block;
        }

        a {
            text-decoration: none;
            color: #000;
        }

        ul,
        ol {
            list-style: none;
        }

        .all {
            overflow: hidden;
            position: relative;
        }

        .icon {
            margin-left: 17px;
            margin-top: 7px;
            width: 39px;
            height: 45px;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }

        .icon1 {
            margin-top: 9px;
            position: absolute;
            right: 75px;
            width: 43px;
            height: 43px;
        }

        .icon2 {
            margin-top: 11.3px;
            position: absolute;
            right: 25px;
            width: 38.9px;
            height: 38.9px;
        }

        .navi {
            position: fixed;
            top: 0;
            width: 100%;
            height: 110px;
            /* background-color: greenyellow; */
            border-bottom: 1px solid #ccc;
            z-index: 3;
        }

        .navi_top {
            position: relative;
            height: 50px;
            background-color: #fff;
            display: flex;
        }

        .navi_top input {
            color: rgb(159, 172, 181);
            position: absolute;
            top: 11px;
            left: 33px;
            outline: none;
            border: none;
            font-size: 17px;
            background-color: rgb(240, 243, 249);
            width: 100px;
        }

        .search {
            position: relative;
            margin-left: 17px;
            margin-top: 13px;
            border-radius: 60px;
            height: 40px;
            width: 160px;
            background-color: rgb(240, 243, 249);
            border: none;
        }

        .fangdajing {
            position: absolute;
            width: 19px;
            height: 18.6px;
            left: -6px;
            top: 6px;
            z-index: 2;
            color: rgb(140, 140, 140);
        }

        .navi_bottom {
            position: relative;
            height: 60px;
            background-color: #fff;
        }

        .icon-jiahao {
            font-size: 19px;
            position: absolute;
            right: 15px;
            bottom: 20px;
        }

        .navi_bottom_in {
            margin: 0 auto;
            width: 87%;
        }

        .navi_bottom ul {
            width: 100%;
            display: flex;
        }

        .navi_bottom ul li {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            width: 30%;
            text-align: center;
            line-height: 60px;
            color: rgb(140, 140, 140);
            font-size: 19px;
        }

        .navi_bottom ul li.curr {
            text-decoration: underline;
            color: #000;
            font-size: 21px;
            font-weight: bold;
        }

        .bottom_navi {
            border-top: 1px solid #eee;
            height: 65px;
            width: 100%;
            background-color: #fff;
            position: fixed;
            bottom: 0;
        }

        .bottom_navi ul {
            display: flex;
        }

        .bottom_navi ul li {
            color: rgb(149, 155, 161);
            height: 100%;
            width: 30%;
        }

        .bottom_navi ul li.bcurr {
            color: #000;
        }

        .tubiao {
            line-height: 40px;
            text-align: center;
            height: 40px;
        }

        .naviText {
            font-size: 14px;
            height: 25px;
            text-align: center;
        }

        .tubiao span {
            font-size: 30px;
        }

        .myInf {
            position: relative;
            margin: 0 auto;
            width: 92%;
            height: 50px;
            margin-top: 125px;
            background-color: rgb(240, 243, 249);
        }

        .touxiang {
            position: absolute;
            left: 10px;
            top: 9px;
            overflow: hidden;
            height: 33px;
            width: 33px;
            border-radius: 20px;
        }

        .touxiang img {
            height: 33px;
            width: 33px;
        }

        .zhuanhuan {
            position: absolute;
            right: 15px;
            top: 15px;
            text-align: center;
            line-height: 20px;
            border-radius: 20px;
            height: 20px;
            width: 20px;
            background-color: #111;
        }

        .icon-zhuanhuan {
            font-size: 9px;
            color: rgb(240, 243, 249);
        }

        .area {
            height: 50px;
            line-height: 50px;
            position: absolute;
            left: 50px;
            width: 70%;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }

        .flist_head {
            height: 40px;
            /* background-color: #ccc; */
            margin-top: 30px;
            display: flex;
        }

        .span1 {
            font-size: 17px;
            font-weight: bold;
            height: 40px;
            line-height: 40px;
            margin-left: 15px;
        }

        .span2 {
            margin-left: auto;
            margin-right: 20px;
            height: 40px;
            line-height: 40px;
            color: rgb(140, 140, 140);
        }

        .shang {
            color: rgb(140, 140, 140);
            height: 40px;
            line-height: 40px;
            margin-left: 5px;
        }

        .flist {
            width: 100%;
            margin-top: 15px;
        }

        .flist li {
            margin-top: 20px;
            display: flex;
            overflow: hidden;
            height: 100px;
            width: 100%;
            background-color: #fff;
        }

        .flist_l {
            margin-left: 15px;
            margin-top: 5px;
            width: 65px;
            height: 65px;
            border-radius: 50px;
            overflow: hidden;
        }

        .flist_l img {
            width: 65px;
            height: 65px;
        }

        .flist_l_out {
            width: 20%;
            height: 100px;
        }

        .flist_r {
            display: flex;
            margin-left: 20px;
            height: 99px;
            width: 80%;
            background-color: #fff;
            border-bottom: 1px solid #eee;
        }

        .flist_r_1 {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            position: relative;
            width: 60%;
            height: 100%;
        }

        .flist_r_1 span:nth-child(1) {
            margin-top: 10px;
            font-size: 20px;
        }

        .flist_r_1 span:nth-child(2) {
            margin-top: 10px;
            font-size: 14px;
            color: rgb(140, 140, 140);
        }

        .flist_r_1 span:nth-child(3) {
            position: absolute;
            top: 33px;
            left: 0;
            font-size: 14px;
            color: rgb(133, 133, 133);
        }

        .flist_r_1 span:nth-child(3) .icon-home {
            font-size: 15px;
            color: rgb(100, 100, 100);
        }

        .flist_r_1 span:nth-child(4) {
            position: absolute;
            bottom: 16px;
            font-size: 14px;
            left: 0;
            color: rgb(126, 181, 179);
            background-color: rgb(237, 249, 251);
        }

        .flist_r_1 span:nth-child(3) .icon-nv {
            color: pink;
            background-color: rgb(240, 243, 249);
        }

        .flist_r_2 {
            width: 40%;

        }

        .icon-dian {
            color: rgb(143, 192, 77);
            font-size: 20px;
        }

        .icon-dian.lixian {
            color: rgb(170, 170, 170);
        }

        .zhuangtai {
            font-size: 15px;
            color: rgb(133, 133, 133);
        }

        .liaotian {
            margin-top: 7px;
            margin-left: 10px;
            border-radius: 3px;
            border: 1px solid #000;
            text-align: center;
            width: 70px;
            height: 30px;
            line-height: 30px;
        }
    </style>
</head>

<body>
    <div class="all">
        <div class="navi">
            <div class="navi_top">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-liebiao"></use>
                </svg>
                <div class="search">
                    <svg class="icon fangdajing" aria-hidden="true">
                        <use xlink:href="#icon-fangdajing"></use>
                    </svg>
                    <input type="text" value="召唤师查询">
                </div>
                <svg class="icon icon1" aria-hidden="true">
                    <use xlink:href="#icon-fenlei-yingxionglianmeng"></use>
                </svg>
                <svg class="icon icon2" aria-hidden="true">
                    <use xlink:href="#icon-chuang"></use>
                </svg>
            </div>
            <div class="navi_bottom">
                <div class="navi_bottom_in">
                    <ul>
                        <li>消息</li>
                        <li class="curr">好友</li>
                        <li>关注</li>
                        <li>附近</li>
                    </ul>
                </div>
                <span class="iconfont icon-jiahao"></span>
            </div>
        </div>
        <div class="myInf">
            <div class="touxiang"><img src="../images/提莫头像.jpg"></div>
            <div class="area">鸽子小莫 |裁决之地 电信|Lv116</div>
            <div class="zhuanhuan">
                <span class="iconfont icon-zhuanhuan"></span>
            </div>
        </div>
        <div class="flist_head">
            <span class="span1">我的好友</span>
            <div class="shang">
                <span class="iconfont icon-shang"></span>
            </div>
            <span class="span2">1/9</span>
        </div>
        <ul class="flist">
            <li>
                <div class="flist_l_out">
                    <div class="flist_l">
                        <img src="../images/提莫头像1.jpg">
                    </div>
                </div>
                <div class="flist_r">
                    <div class="flist_r_1">
                        <span>河边两棵树</span>
                        <span>| 裁决之地</span>
                        <span>
                            <span class="iconfont icon-home"></span>
                            角落的回忆
                            <span class="iconfont icon-nv"></span>
                            Lv1
                        </span>
                        <span>不屈王者Ⅱ</span>
                    </div>
                    <div class="flist_r_2">
                        <span class="iconfont icon-dian"></span>
                        <span class="zhuangtai">游戏在线</span>
                        <div class="liaotian">聊天</div>
                    </div>
                </div>
            </li>
            <li>
                <div class="flist_l_out">
                    <div class="flist_l">
                        <img src="../images/妖姬Q版头像.jpg">
                    </div>
                </div>
                <div class="flist_r">
                    <div class="flist_r_1">
                        <span>河边三棵树</span>
                        <span>| 裁决之地</span>
                        <span>
                            <span class="iconfont icon-home"></span>
                            角落的回忆
                            <span class="iconfont icon-nv"></span>
                            Lv1
                        </span>
                        <span>倔强宗师Ⅱ</span>
                    </div>
                    <div class="flist_r_2">
                        <span class="iconfont icon-dian lixian"></span>
                        <span class="zhuangtai">游戏离线</span>
                        <div class="liaotian">聊天</div>
                    </div>
                </div>
            </li>

        </ul>
        <div class="bottom_navi">
            <ul>
                <li>
                    <div class="tubiao">
                        <span class="iconfont icon-zixun"></span>
                    </div>
                    <div class="naviText">资讯</div>
                </li>
                <li>
                    <div class="tubiao">
                        <span class="iconfont icon-pengyou"></span>
                    </div>
                    <div class="naviText">盟友圈</div>
                </li>
                <li class="bcurr">
                    <div class="tubiao">
                        <span class="iconfont icon-xinfeng-copy"></span>
                    </div>
                    <div class="naviText">好友</div>
                </li>
                <li>
                    <div class="tubiao">
                        <span class="iconfont icon-shangcheng"></span>
                    </div>
                    <div class="naviText">商城</div>
                </li>
                <li>
                    <div class="tubiao">
                        <span class="iconfont icon-woicon"></span>
                    </div>
                    <div class="naviText">我</div>
                </li>
            </ul>
        </div>
    </div>
    <script>
        let ul = document.querySelector(".navi_bottom ul");
        let li = ul.querySelectorAll("li");
        console.log(li);
        for (var i = 0; i < ul.children.length; i++) {
            li[i].addEventListener("click", function () {
                ul.querySelector(".curr").classList.remove("curr");
                this.classList.add("curr");
            });
        }
    </script>
    <script>
        let ul1 = document.querySelector(".bottom_navi ul");
        let li1 = ul1.querySelectorAll("li");
        for (var i = 0; i < ul1.children.length; i++) {
            li1[i].addEventListener("click", function () {
                ul1.querySelector(".bcurr").classList.remove("bcurr");
                this.classList.add("bcurr");
            });
        }
    </script>
</body>

</html>